import React, { useEffect, useState } from 'react';
import * as service from '../../../api/Statistics'
import './Style/DataSign.scss'
import { DatePicker, Space, Table, Button, Tooltip, Select, Card } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { Column } from '@ant-design/plots';
import { DualAxes } from '@ant-design/plots';
import ExportJsonExcel from "js-export-excel"

interface Props {

}
const { RangePicker } = DatePicker;

function StatSign(props: Props) {
    // 列表数据
    const [signlist, setSign] = useState([])
    const [loading, setLoading] = useState(false);
    // 下拉框
    const [listerone, setListerone] = useState([])
    const [listertwo, setListertwo] = useState([])
    const [listerthree, setListerthree] = useState([])
    // 图标
    const [data, setData] = useState([]);

    const [data1, setData1] = useState([]);
    const [data2, setData2] = useState([]);
    var [pagination, setPagination] = useState({ current: 1, pageSize: 5, total: 0});


    useEffect(() => {
        setLoading(true);

        //  var signlists = service.moni().then((res) => {
        //      console.log(res);
        //      setData1(res.data)
        //      setData2(res.data)
        //         // setSign(res.data.data)
        //         // setLoading(false);
        //     })
        // 签约数据列表
        service.sign_list().then((res) => {
            console.log(res);
            setSign(res.data.data)
            setData1(res.data.data)
            setData2(res.data.data)
            setPagination({
                ...pagination,
                total: res.data.data.length
            })
            setLoading(false);
        })
        // 目标签约量
        // service.sign_list().then((res) => {
        //     console.log(res);
        //     setData(res.data.data)
        //     setLoading(false);
        // })
        // 机构下拉表
        service.optionlist().then((res) => {
            console.log("机构", res.data.data);//id: 1, name: '全部
            var arr = res.data.data.map((item: any) => {
                return { value: item.mechanismId, label: item.mechanismName }
            })
            setListerone(arr)
        })
        // 团队列表
        service.teamlist().then((res) => {
            // console.log("团队", res);
            var arr = res.data.data.map((item: any) => {
                return { value: item.teamName, label: item.teamName }
            })
            setListertwo(arr)
        })
        // 医生列表
        service.teamlistwo().then((res) => {
            console.log("医生", res);
            var arr = res.data.data.map((item: any) => {
                return { value: item.doctorName, label: item.doctorName }
            })
            setListerthree(arr)
        })
    }, [])
    const handleChange = (pagi: any) => {
        setPagination(pagi);//更新页码
    }
    const onChange = (value: any, dateString: any) => {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
    };
    const onOk = (value: any) => {
        console.log('onOk: ', value);
    };

    //监听下拉框数据
    const handle = () => {
            // console.log(value);
        //     // setOrganization(value)
            service.sign_search({ }).then((res) => {
                console.log(res)
                setData1(res.data.data)
                setData2(res.data.data)
                setSign(res.data.data)
             
            })
    };


    // 列表数据源
    const columns = [
        {
            title: '序号',
            render: (_: any, record: never) => <a>{signlist.indexOf(record) + 1}</a>,//动态渲染标签/组件
        },
        {
            title: '日期',
            dataIndex: 'date',
            key: 'date',
        },
        {
            title: '目标签约量',
            dataIndex: 'contractnum',
            key: 'contractnum',
        },
        {
            title: '实际签约量',
            dataIndex: 'sumcontract',
            key: 'sumcontract',
        },
        {
            title: '签约完成率',
            // dataIndex: 'prc',
            render: (_: any, record: any) => Number(record.prc * 100).toFixed(2)+'%',
            key: 'prc',
        }
    ]
    //点击搜索
    const onSearch = async (value: string) => {
        // var res = await searchPendingList({name_like:value})
        // setData(res.data)
    };
// 模拟的
    const config1 = {
        data: [data1, data2],
        xField: 'date',
        yField: ['contractnum', 'sumcontract'],
        geometryOptions: [
            {
                geometry: 'line',
                color: '#5B8FF9',
            },
            {
                geometry: 'column',
                color: '#5AD8A6',
            },
        ],
        meta: {
            contractnum: {
                alias: '目标签约量',
            },
            sumcontract: {
                alias: '实际签约量',
            },
        },
    };
    let excel = () => {//导出Excel表
        let sheetFilter = ["date", "contractnum", 'sumcontract',]//需要导出的属性，一般列表数据的属性
        let option = { fileName: "", datas: [{}] };
        option.fileName = "签约业绩";
        option.datas = [
            {
                sheetData: signlist,//需要导出的数据
                sheetName: "签约业绩",
                sheetFilter: sheetFilter,
                sheetHeader: ["日期", "目标签约量", "实际签约量", , ],//每一列的列头
                columnWidth: [20, 20, 20, 20],//每一列的宽
            }
        ]
        let toExcel = new ExportJsonExcel(option);
        toExcel.saveExcel();
    }
    return (
        <div className='data-sign' style={{ padding: 20 }}>
            <div className='title'>签约业绩统计</div>

            <div className='top'>
                <div className='padding'>
                    <span>机构</span>&nbsp;&nbsp;
                    <Select
                        defaultValue="全部"
                        style={{ width: 160 }}
                        // onChange={handleChangeorang}
                        options={
                            listerone
                        }
                    />
                </div>
                <div className='padding'>
                    <span>医生团队</span>&nbsp;&nbsp;
                    <Select
                        defaultValue="请选择"
                        style={{ width: 160 }}
                        // onChange={doctorts}
                        options={
                            listertwo
                        }
                    />
                </div>
                <div className='padding'>
                    <span>医生</span>&nbsp;&nbsp;
                    <Select
                        defaultValue="请选择"
                        style={{ width: 160 }}
                        // onChange={doctor}
                        options={
                            listerthree
                        }
                    />
                </div>
                <Tooltip title="search">
                <div className="but" >
                <Button type="primary" icon={<SearchOutlined />} onClick={() => { handle()}}>
                    搜索
                </Button>
                </div>
                </Tooltip>

            </div>
            <div style={{ padding: "0 100px" }}>
                <Card title="签约量" bordered={false}>
                       <DualAxes { ...config1} />
                </Card>
            </div>
            <Button onClick={() => { excel() }} style={{ float: 'right', margin: '10px 0' }}>导出</Button>
            <Table columns={columns} dataSource={signlist}
                loading={loading}   pagination={pagination}
                onChange={(pagi) => { handleChange(pagi) }}
            />
        </div>
    );

}
export default StatSign;

function onSearchChange(arg0: string, value: string) {
    throw new Error('Function not implemented.');
}